<template>
  <div class="layout">
    <el-card>
      <div class="header">
        <span>输入你的链接:</span>
        <el-input v-model="wsUrl" placeholder="wsUrl" size="large"/>
        <el-switch v-model="connectFlag" @change="onConnect"/>
        <span>IoGame测试工具</span>


        <span>与服务器连接数: {{ serverCount }}</span>
        <span>与IoGame链接数: {{ socketCount }}</span>
        <el-link href="https://gitee.com/licheng1013/iogame-test" target="_blank">Gitee</el-link>
      </div>
    </el-card>

    <div class="bottom" :class="animBounceIn">
      <el-card class="aside">
        <div>类区域</div>
        <div v-for="i in classList">
          <el-tooltip class="box-item" effect="dark" :content="i.longDesc" placement="right">
            <el-button @click="onSelClass(i.className)" :style="{'background-color': i===selClass ? '#DCE2F1':''}">
              {{ i.desc }}-{{ i.className }}
            </el-button>
          </el-tooltip>
        </div>
      </el-card>
      <el-card class="aside">
        <div>方法区域</div>
        <div class="aside-method">
          <div v-for="i in methodList">
            <el-tooltip class="box-item" effect="dark" :content="i.longDesc" placement="right">
              <el-button @click="onSelMethod(i)"
                         :style="{'background-color':  i.methodName===selMethod ? '#DCE2F1':''}">
                {{ i.desc }}-{{ i.methodName }}
              </el-button>
            </el-tooltip>
          </div>
        </div>
      </el-card>
      <el-card class="aside-input">
        <div>参数区域</div>
        <el-button v-if="selMethod!==''" style="width: 100%;margin-bottom: 16px" type="primary" @click="onSend">发送
        </el-button>
        <div class="aside-param">
          <el-form label-position="left" label-width="100px">
            <el-form-item :label="key" v-for="(val, key, index) in paramMap">
              <el-input v-model="paramMap[key]"></el-input>
            </el-form-item>
          </el-form>
        </div>
      </el-card>
      <el-card class="main">
        <div class="json-data">
          <pre>{{ result }}</pre>
        </div>
      </el-card>
    </div>
  </div>
</template>


<script setup>
import {animBounceIn, bounceInUpList, onCssAnim} from "../assets/anim";

import {ref} from "vue";
import axios from "axios";
import {initWebSocket} from "../util/webSocket";
import {ElMessage, ElNotification} from "element-plus";
import {routerMap} from "../util/socket";

// ws链接
let wsUrl = ref("ws://127.0.0.1:10100/websocket")
let connectFlag = ref(false)
let classList = ref([])//类列表
let methodList = ref([])//方法列表
let paramMap = ref({})//参数map

let selClass = ref("")//选择类
let selMethod = ref("")//选择方法
let result = ref("") //结果
let userId = Date.now() //用户id

//io-game 连接数
let socketCount = ref(0)
// 服务器连接数
let serverCount = ref(0)

// 连接或取消连接,
function onConnect() {
  axios.get("/api/connect", {
    params: {
      userId: userId,
      url: wsUrl.value
    }
  })
}

// 获取选择的cls的所有方法
function onSelClass(v) {
  selClass.value = v;
  selMethod.value = ""
  paramMap.value = {}

  axios.get("/api/method", {
    params: {
      key: v
    }
  }).then((response) => {
    methodList.value = response.data
    onCssAnim(".aside-method", bounceInUpList, () => {
    })
  })
}

// 获取方法参数
function onSelMethod(v) {
  selMethod.value = v.methodName
  paramMap.value = {}
  paramMap.value = v.methodParam
  onCssAnim(".aside-param", bounceInUpList, () => {
  })
}

axios.get("/api/group").then((response) => {
  classList.value = response.data
})

routerMap.set(0, (e) => {
  connectFlag.value = e === 0
  if (e === 0) {
    ElMessage.success("连接成功！")
  } else if (e === -1) {
    ElMessage.warning("连接断开！")
  } else if (e === -2) {
    ElMessage.error("连接失败！")
  }
})

routerMap.set(1, (e) => {
  result.value = JSON.parse(e)
  onCssAnim(".json-data", bounceInUpList, () => {
  })
})

routerMap.set(2, (e) => {
  socketCount.value = e
})
routerMap.set(3, (e) => {
  serverCount.value = e
})


axios.get("/api/port").then((response) => {
  let webSocket = initWebSocket("ws://localhost:" + response.data + "/game/" + userId);
  webSocket.onmessage = (e) => {
    // 需要转换一下
    let parse = JSON.parse(e.data);
    routerMap.get(parse.router)(parse.data)
  }
})


function onSend() {
  axios.post("/api/send", {
    userId: userId,
    key: selClass.value + selMethod.value,
    json: JSON.stringify(paramMap.value),
  })
}


ElNotification({
  title: '新页面已推出！',
  dangerouslyUseHTMLString: true,
  message: ' <a href="#/plus">访问<i>新页面</i></a> ',
})

</script>

<style scoped lang="scss">
* {
  background-color: #FFFFFF;
}

.layout {
  .el-card {
    margin: 8px;
  }

  height: 100%;
  display: flex;
  flex-direction: column;

  .header {
    display: flex;
    align-items: center;

    * {
      margin-left: 30px;
    }

    .el-input {
      width: 300px;
    }
  }

  .bottom {
    height: 100%;
    display: flex;


    .aside, .aside-input {

      .el-button {
        margin: 4px;
        width: 100%;
      }

      width: 200px;
      text-align: center;
    }

    .aside-input {
      width: 300px;
    }

    .main {
      font-size: 18px;
      flex: 1;
    }

  }


}
</style>